
import React from "react";
import PropTypes from "prop-types";
class TodoListItem extends React.Component {
    constructor(props) {
        super(props);
        this.handleDelete = this.handleDelete.bind(this);
    }
    // 降低没必要的视图渲染
    shouldComponentUpdate(nextProps,nextState) {
        if (nextProps.content !== this.props.content) {
            return true
        } else {
            return false;
        }
    }
    handleDelete() {
        const { setDelete , index} = this.props;
        setDelete(index)
    }
    render() {
        // 当如组件的render函数重新执行时 子组件的render也会重新允许
        console.log('child--render')
        const { content } = this.props;
        return(
            <div>
                <li onClick={this.handleDelete} dangerouslySetInnerHTML={{__html: content}}></li>
            </div>
        )
    }
}


// 类型校验
TodoListItem.propTypes = {
    setDelete: PropTypes.func,
    index: PropTypes.number
};

// 给定默认值 父组件没有定义相应的属性时的默认值
TodoListItem.defaultProps = {
    content: "你好"
};


export default TodoListItem;